<script lang="ts">
  export let color: string | undefined = undefined
  export let topRightColor = "#FF4E4E"
  export let bottomRightColor = "#6E56FF"
  export let topLeftColor = "#F97777"
  export let bottomLeftColor = "#9F8FFF"
  export let size = 265

  // If single color is provided, use it for all
  $: finalTopRight = color || topRightColor
  $: finalBottomRight = color || bottomRightColor
  $: finalTopLeft = color || topLeftColor
  $: finalBottomLeft = color || bottomLeftColor
</script>

<svg
  role="img"
  aria-label="Budibase logo"
  width={size}
  height={size}
  viewBox="0 0 265 265"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <g clip-path="url(#clip0_1_1799)">
    <path
      d="M158.2 8.6V116.6C158.2 121.3 162 125.2 166.8 125.2H213.8C218 125.2 222 123.2 224.6 119.8L262.9 68.9C265.7 65.2 265.7 60.1 262.9 56.4L224.6 5.4C222 2 218 0 213.8 0H166.8C162 0 158.2 3.8 158.2 8.6Z"
      fill={finalTopRight}
    />
    <path
      d="M158.2 148.4V256.4C158.2 261.1 162 265 166.8 265H213.8C218 265 222 263 224.6 259.6L262.9 208.7C265.7 205 265.7 199.9 262.9 196.2L224.6 145.3C222.1 141.9 218.1 139.9 213.8 139.9H166.8C162 139.8 158.2 143.7 158.2 148.4Z"
      fill={finalBottomRight}
    />
    <path
      d="M0 8.6V116.6C0 121.3 3.8 125.2 8.6 125.2H109.6C113.8 125.2 117.8 123.2 120.4 119.8L155.9 72.5C160.3 66.6 160.3 58.5 155.9 52.6L120.3 5.4C117.8 2 113.8 0 109.5 0H8.6C3.8 0 0 3.8 0 8.6Z"
      fill={finalTopLeft}
    />
    <path
      d="M0 148.4V256.4C0 261.1 3.8 265 8.6 265H109.6C113.8 265 117.8 263 120.4 259.6L155.9 212.3C160.3 206.4 160.3 198.3 155.9 192.4L120.4 145.1C117.9 141.7 113.9 139.7 109.6 139.7H8.6C3.8 139.8 0 143.7 0 148.4Z"
      fill={finalBottomLeft}
    />
  </g>
  <defs>
    <clipPath id="clip0_1_1799">
      <rect width="265" height="265" fill="white" />
    </clipPath>
  </defs>
</svg>
